<template>
  <el-form-item :label="widget.name"
   :prop="widget.model"
   :class="widget.type == 'hidden' ? 'hidden' : (widget.options.customClass || '')"
   :label-width="!widget.name ? '0px' : ''">
    <template v-if="widget.type == 'hidden'" >
      <el-input
        type="hidden"
        v-model="dataModel"
      ></el-input>
    </template>
    <template v-if="widget.type == 'input'" >
      <el-input
        v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
        type="number"
        v-model.number="dataModel"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        :disabled="widget.options.disabled"
      ></el-input>
      <el-input
        v-else
        :type="widget.options.dataType"
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
      ></el-input>
    </template>

    <template v-if="widget.type == 'textarea'">
      <el-input type="textarea" :rows="5"
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
      ></el-input>
    </template>

    <template v-if="widget.type == 'number'">
      <el-input-number
        v-model="dataModel"
        :style="{width: widget.options.width}"
        :step="widget.options.step"
        controls-position="right"
        :disabled="widget.options.disabled"
        :min="widget.options.min"
        :max="widget.options.max"
      ></el-input-number>
    </template>

    <template v-if="widget.type == 'radio'">
      <el-radio-group v-model="dataModel"
        :style="{width: widget.options.width}"
        :disabled="widget.options.disabled"
      >
        <el-radio
          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value" v-for="(item, index) in widget.options.options" :key="index"
        >
          <template>{{widget.options.showLabel ? item.label : item.value}}</template>
        </el-radio>
      </el-radio-group>
    </template>

    <template v-if="widget.type == 'checkbox'">
      <el-checkbox-group v-model="dataModel"
        :style="{width: widget.options.width}"
        :disabled="widget.options.disabled"
      >
        <el-checkbox

          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value" v-for="(item, index) in widget.options.options" :key="index"
        >
          <template>{{widget.options.showLabel ? item.label : item.value}}</template>
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="widget.type == 'time'">
      <el-time-picker
        v-model="dataModel"
        :is-range="widget.options.isRange"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :readonly="widget.options.readonly"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :arrowControl="widget.options.arrowControl"
        :value-format="widget.options.format"
        :style="{width: widget.options.width}"
      >
      </el-time-picker>
    </template>

    <template v-if="widget.type=='date'">
      <el-date-picker
        v-model="dataModel"
        :type="widget.options.type"
        :placeholder="widget.options.placeholder"
        :start-placeholder="widget.options.startPlaceholder"
        :end-placeholder="widget.options.endPlaceholder"
        :readonly="widget.options.readonly"
        :disabled="widget.options.disabled"
        :editable="widget.options.editable"
        :clearable="widget.options.clearable"
        :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
        :format="widget.options.format"
        :style="{width: widget.options.width}"
      >
      </el-date-picker>
    </template>

    <template v-if="widget.type =='rate'">
      <el-rate v-model="dataModel"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :allow-half="widget.options.allowHalf"
      ></el-rate>
    </template>

    <template v-if="widget.type == 'color'">
      <el-color-picker
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :show-alpha="widget.options.showAlpha"
      ></el-color-picker>
    </template>

    <template v-if="widget.type == 'select'">
      <el-select
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :multiple="widget.options.multiple"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        :filterable="widget.options.filterable"
      >
        <el-option v-for="item in widget.options.options" :key="item.value" :value="item.value" :label="widget.options.showLabel?item.label:item.value"></el-option>
      </el-select>
    </template>

    <template v-if="widget.type=='switch'">
      <el-switch
        v-model="dataModel"
        :disabled="widget.options.disabled"
      >
      </el-switch>
    </template>

    <template v-if="widget.type=='slider'">
      <el-slider
        v-model="dataModel"
        :min="widget.options.min"
        :max="widget.options.max"
        :disabled="widget.options.disabled"
        :step="widget.options.step"
        :show-input="widget.options.showInput"
        :range="widget.options.range"
        :style="{width: widget.options.width}"
      ></el-slider>
    </template>

    <template v-if="widget.type=='imgupload'">
      <tw-upload
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :size="config.size"
        :action="config.action"
        :multiple="widget.options.multiple"
        :headers="widget.options.headers"
        :limit="widget.options.limit"
        :list-type="widget.options.listtype"
        :auto-upload="widget.options.autoupload"
        :data="widget.options.data"
        :drag="widget.options.drag"
        :accept="widget.options.accept"
        :with-credentials="config.withcredentials"
        :show-file-list="widget.options.showfilelist"
        :placeholder="widget.options.placeholder"
        :tips="widget.options.tips"
        :useCustFilelist="widget.options.useCustFilelist"
        :useCustFileicon="widget.options.useCustFileicon"
        :icons="config.icons"
        :btnType="widget.options.btnType"
        :maxsize="widget.options.maxsize"
        :closeAlert="widget.options.closeAlert"
      >
      </tw-upload>
    </template>

    <template v-if="widget.type == 'editor'">
      <vue-editor
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :style="{width: widget.options.width}"
      >
      </vue-editor>
      <!-- <tw-rich-editor
        :style="{width: widget.options.width, height: widget.options.height || 300}"
        v-model="dataModel"
      ></tw-rich-editor> -->
    </template>

    <template v-if="widget.type == 'cascader'">
      <el-cascader
        v-model="dataModel"
        :disabled="widget.options.disabled"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width}"
        :options="widget.options.options"
      >
      </el-cascader>
    </template>

    <template v-if="widget.type == 'text'">
      <span>{{dataModel}}</span>
    </template>
  </el-form-item>
</template>

<script>
import TwUpload from './Upload'
// import twRichEditor from './rich-editor/rich-editor'

export default {
  props: ['widget', 'models', 'rules', 'config', 'mulform', 'colIndex'],
  components: {
    TwUpload
  },
  inject: ['_root'],
  data () {
    return {
      dataModel: this.models[this.widget.model]
    }
  },
  created () {

  },
  methods: {
    // handleImageAdded (file, Editor, cursorLocation, resetUploader) {
    //   // An example of using FormData
    //   // NOTE: Your key could be different such as:
    //   // formData.append('file', file)

    //   var formData = new FormData()
    //   formData.append("image", file)

    //   window.axios({
    //     url: this._root.action,
    //     method: "POST",
    //     data: formData
    //   }).then(result => {
    //     let url = result.data.url; // Get url from response
    //     Editor.insertEmbed(cursorLocation, "image", url);
    //     resetUploader();
    //   }).catch(err => {
    //     console.log(err);
    //   })
    // }
  },
  watch: {
    dataModel: {
      deep: true,
      handler (val) {
        this.models[this.widget.model] = val
        if (!!this.mulform) {
          this.models[this.mulform.model][this.colIndex][this.widget.model] = val
        }

        this.$emit('update:models', {
          ...this.models,
          [this.widget.model]: val
        })
        this.$emit('input-change', val, this.widget.model)
      }
    },
    models: {
      deep: true,
      handler (val) {
        if (!!this.mulform) {
          this.models[this.mulform.model][this.colIndex][this.widget.model] = val[this.widget.model]
          this.dataModel = val[this.widget.model]
        } else {
          this.dataModel = val[this.widget.model]
        }
      }
    }
  }
}
</script>
